<template>
  <div id="cqd">
    <el-row>
      <el-table :data="table.data">
        <el-table-column type="index" label="序号" width="70"></el-table-column>
        <el-table-column prop="pro" label="省份" show-overflow-tooltip></el-table-column>
        <el-table-column prop="name" label="煤矿名称"  show-overflow-tooltip></el-table-column>
        <el-table-column prop="month" label="月份" show-overflow-tooltip></el-table-column>
        <el-table-column prop="total" label="隐患总数" show-overflow-tooltip></el-table-column>
        <el-table-column prop="zd" label="重大隐患" show-overflow-tooltip></el-table-column>
        <el-table-column prop="yb" min-width="80" label="一般隐患"></el-table-column>
        <el-table-column prop="zgz" min-width="80" label="整改中"></el-table-column>
        <el-table-column prop="cqzg" min-width="80" label="超期整改"></el-table-column>
        <el-table-column label="详情" show-overflow-tooltip>
          <template v-slot:default="{ row }">
            <el-link type="primary"  @click="openDetail(row)">详情</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!-- 分页信息栏 -->
    <el-row class="pagination-bar">
      <el-col :span="8" class="page-info">显示第&nbsp;1&nbsp;至&nbsp;10&nbsp;项结果，共&nbsp;4&nbsp;项</el-col>
      <el-col :span="16" class="text-right">
        <el-pagination
          layout="prev,pager,next,jumper"
          :total="table.total"
          :current-page.sync="table.currentPage"
          :page-size="table.pageSize"
          @current-change="initData"
        ></el-pagination>
      </el-col>
    </el-row>
    <local-dialog
      class="ybyh"
      :title="diaDetail.title"
      width="80%"
      :visible.sync="diaDetail.show"
      :close-on-click-modal="false"
      v-if="diaDetail.show">
      <zbjcDetail :zbjcdata="diaDetail" v-if="diaDetail.show"></zbjcDetail>
      </local-dialog>
  </div>
</template>

<script>
import zbjcDetail from "./zbjcDetail.vue"
export default {
  components: {zbjcDetail},
  props: {
    zbjcdata: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      table: {
        data: [], //数据
        total: 0, //总条数
        currentPage: 1, //当前页码
        pageSize: 10 //每页条数
      },
      diaDetail:{
        show:false,
        name:this.zbjcdata.name,
        title:"",
      }
    };
  },
  mounted() {
    this.initData();
  },
  computed: {
    // 数据起点
    currentStart() {
      return this.table.total == 0
        ? 0
        : (this.table.currentPage - 1) * this.table.pageSize + 1;
    },
    // 数据终点
    currentEnd() {
      return this.currentStart == 0
        ? 0
        : this.currentStart + this.table.pageSize - 1 > this.table.total
        ? this.table.total
        : this.currentStart + this.table.pageSize - 1;
    }
  },
  methods: {
    openDetail(row){
         window.open("http://223.71.251.212:8889/LrMap/MapDisplay/Index", "_blank")
    //   if(row.name == "东欢坨煤矿"){
    //     this.diaDetail.show = true;
    //     this.diaDetail.title = "隐患详情"
    //   }
    },
    initData() {
      this.request({
        url: "data/getData/3.10",
        method: "get"
      }).then(data => {
        this.diaDetail.data = data.data;
      });
    },
    initData() {
      this.request({
        url: "data/getData/3.32",
        method: "get"
      }).then(data => {
        this.table.data = data.data;
      });
    }
  }
};
</script>
<style lang="less" scoped>
#cqd /deep/ ::-webkit-scrollbar-thumb {
  background-color: #dddddd !important;
}
.ybyh /deep/ .el-dialog{
    margin-top: 6vh !important;
}
</style>